<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>设置</title>
  <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/userInfo/xuserInfo.css">
</head>
<body>
  <div class="container personalSetting">
    <div class="row info-modify">
      <div class="col-xs-12 title">
        <div class="user-logo" style="padding-top: 10px; padding-bottom: 10px;">
          <a href="javascript:;"><img src="./img/user.jpg" class="img-circle"></a>     
        </div> 
        <span class="vertical-align inputInfo" style="margin-left: 25px;">修改头像</span> 
        <a href="#" class="goToSetting"><img src="./img/logo/rightArrow.png"></a>
      </div>
    </div>
    <div class="row info-modify" id="setName">
      <div class="col-xs-12 title">
        <p class="line"><span class="userInfo">昵称</span><span id="" class="inputInfo">曾小贤</span></p>
        <a href="#" class="goToSetting"><img src="./img/logo/rightArrow.png"></a>
      </div>
    </div>
    <div class="row info-modify" id="setSignature">
      <div class="col-xs-12 title">
        <p class="line"><span class="userInfo">个性签名</span><span id="" class="inputInfo"></span></p>
        <a href="#" class="goToSetting"><img src="./img/logo/rightArrow.png"></a>
      </div>
    </div>
    <div class="row info-modify" id="setTel">
      <div class="col-xs-12 title">
        <p class="line"><span class="userInfo">手机号</span><span id="" class="inputInfo">15151515151</span></p>
        <a href="#" class="goToSetting"><img src="./img/logo/rightArrow.png"></a>
      </div>
    </div>
    <div class="row info-modify" id="setAdd">
      <div class="col-xs-12 title">
        <p class="line"><span class="userInfo">我的地址</span><span id="" class="inputInfo">中国福建福州</span></p>
        <a href="./addAddresses.html" class="goToSetting"><img src="./img/logo/rightArrow.png"></a>
      </div>
    </div>
  </div>

  <!-- 设置昵称 -->
  <div class="fullscreen" id="setNameModel">
    <div class="row">
      <form role="form" class="center-block" style="width: 80%; margin-top: 20px;">
        <div class="form-group">
          <input type="text" class="form-control" style="height: 40px;" value="曾小贤" >
        </div>
        <div class="form-group">
          <button class="btn btn-default col-xs-offset-1 col-xs-4" style="height: 40px;" id="closeSetNameModel">取消</button>
          <button class="btn  btn-red col-xs-offset-2 col-xs-4" style="height: 40px;" id="saveSetNameModel">保存</button>
        </div>
      </form>    
    </div>
  </div>

  <!-- 设置个性签名 -->
  <div class="fullscreen" id="setSignatureModel">
    <div class="row">
      <form role="form" class="center-block" style="width: 80%; margin-top: 20px;">
        <div class="form-group">
          <textarea name="" id="" class="form-control" cols="30" rows="8" placeholder="请输入您的签名，不超过30字"></textarea>
        </div>
        <div class="form-group">
          <button class="btn btn-default col-xs-offset-1 col-xs-4" style="height: 40px;" id="closeSetSignatureModel">取消</button>
          <button class="btn  btn-red col-xs-offset-2 col-xs-4" style="height: 40px;" id="saveSetSignatureModel">保存</button>
        </div>
      </form>    
    </div>
  </div>

  <!-- 设置电话号码 -->
  <div class="fullscreen" id="setTelModel">
    <div class="row">
      <form role="form" class="center-block" style="width: 80%; margin-top: 20px;">
        <div class="form-group">
          <div class="input-group">
            <span class="input-group-addon">手机号：</span>
            <input type="text" class="form-control" style="height: 40px;" placeholder="请输入手机号">
          </div>         
        </div>
        <div class="form-group">
          <div class="input-group">
            <span class="input-group-addon">验证码：</span>
            <input type="text" class="form-control" style="height: 40px;" placeholder="请输入验证码">
            <span class="input-group-btn">
              <button class="btn btn-default" type="button" style="height: 40px;">获取验证码</button>
            </span>
          </div>
        </div>
        <div class="form-group">
          <button class="btn btn-default col-xs-offset-1 col-xs-4" style="height: 40px;" id="closeSetTelModel">取消</button>
          <button class="btn btn-red col-xs-offset-2 col-xs-4" style="height: 40px;" id="saveSetTelModel">保存</button>
        </div>
      </form>    
    </div>
  </div>

  <script src="./lib/jquery/jquery.min.js"></script>
  <script>
    $(function() {
      $('#setName').on('click', function() { $('#setNameModel').fadeIn(); })
      $('#closeSetNameModel, #saveSetNameModel').on('click', function () { $('#setNameModel').fadeOut(); })

      $('#setSignature').on('click', function () { $('#setSignatureModel').fadeIn(); })
      $('#closeSetSignatureModel, #saveSetSignatureModel').on('click', function () { $('#setSignatureModel').fadeOut(); })
     
      $('#setTel').on('click', function () { $('#setTelModel').fadeIn(); })
      $('#closeSetTelModel, #saveSetTelModel').on('click', function () { $('#setTelModel').fadeOut(); })
      $('#setAdd').on('click', function() { location.href = './addAddresses.html'})
    });
  </script>
</body>
</html>